<!doctype html>
<html lang="zh_cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>房东辅助系统-登录</title>
    <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.css">
    <script type="text/javascript" src="../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../static/js/bootstrap.bundle.js"></script>
</head>
<body>
<div class="container d-flex justify-content-center align-items-center vh-100 bg-success">
    <div class="card shadow-md border-0 w-100 bg-success-subtle">
        <div class="card-body">
            <h4 class="card-title text-center mb-4">房东-注册</h4>
            <form>
                <div class="mb-3 row">
                    <label for="userName" class="col-form-label col-3">姓名</label>
                    <div class="col-9">
                        <input type="text" class="form-control" id="userName" placeholder="请输入姓名" maxlength="10">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="mobile" class="col-form-label col-3">手机号</label>
                    <div class="col-9">
                        <input type="tel" class="form-control" id="mobile" placeholder="请输入手机号" maxlength="11">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="waterPrice" class="col-form-label col-3">水价/吨</label>
                    <div class="col-9">
                        <input type="number" class="form-control" id="waterPrice" placeholder="请输入水费价格" maxlength="5" value="1.0">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="electricPrice" class="col-form-label col-3">电价/度</label>
                    <div class="col-9">
                        <input type="number" class="form-control" id="electricPrice" placeholder="请输入电费价格" maxlength="5" value="1.0">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="rentDay" class="col-form-label col-3">收租日</label>
                    <div class="col-9">
                        <input type="number" class="form-control" id="rentDay" placeholder="请输入每月收租日期" min="1" max="31" value="1">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="password" class="col-form-label col-3">密码</label>
                    <div class="col-9">
                        <input type="password" class="form-control" id="password" placeholder="请输入6-10位登录密码" minlength="6" maxlength="10">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="password2" class="col-form-label col-3">确认密码</label>
                    <div class="col-9">
                        <input type="password" class="form-control" id="password2" placeholder="请再次输入登录密码" minlength="6" maxlength="10">
                    </div>
                </div>
                <div class="mb-3 row">
                    <button type="button" class="form-control col btn btn-primary" onclick="register()" id="registerBtn">
                        注册<span id="loadingSpinner" class="spinner-border spinner-border-sm ms-1" role="status" aria-hidden="true" style="display: none"></span>
                    </button>
                </div>
            </form>
            <div class="text-center mt-3 ">
                <a href="login.html" class="btn btn-link">登录</a> <a href="tel:15210831334" class="btn btn-link">联系管理员</a>
            </div>
        </div>
    </div>
</div>

<!-- 错误提示框 -->
<div class="modal fade" id="errModal" tabindex="-1" aria-labelledby="modalLab1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalLab1">错误提示</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center" id="err-body"></div>
            <div class="modal-footer p-1">
                <button type="button" class="btn btn-sm btn-primary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    function register(){
        let userName = $('#userName').val();
        let mobile = $('#mobile').val();
        let pwd = $('#password').val();
        let pwd2 = $('#password2').val();
        if (userName.length === 0 || mobile.length === 0 || pwd.length === 0 || pwd2.length === 0) {
            $("#err-body").text("请填写完整表单");
            $("#errModal").modal('show');
            return;
        }
        if (pwd.length < 6 || pwd.length > 10) {
            $("#err-body").text("密码长度不符合要求");
            $("#errModal").modal('show');
            return;
        }
        if (pwd !== pwd2) {
            $("#err-body").text("两次输入的密码不一致");
            $("#errModal").modal('show');
            return;
        }
        let waterPrice = $('#waterPrice').val();
        let electricPrice = $('#electricPrice').val();
        let rentDay = $('#rentDay').val();
        $("#loadingSpinner").show();
        $("#registerBtn").attr("disabled", true);
        $.ajax({
            url: '/api/user/register',
            contentType: 'application/json;charset=utf-8',
            type: 'POST',
            dataType: 'json',
            data: JSON.stringify({mobile: mobile, password: pwd, userName: userName, waterPrice: waterPrice, electricPrice: electricPrice, rentDay: rentDay}),
            success: function(res) {
                if (res.code === 1) {
                    $("#err-body").text(res.message);
                    $("#errModal").modal('show');
                    return;
                }
                location.href = "/page/main.html";
            },
            error: function(xhr, status, error) {
                $("#err-body").text('系统异常，请求失败:' + xhr.status);
                $("#errModal").modal('show');
            },
            complete: function() {
                // 隐藏加载动画
                $("#loadingSpinner").hide();
                $("#registerBtn").removeAttr("disabled");
            }
        });
    }
</script>
</html>